<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">  <!-- 双向绑定 -->
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      v-model.trim="task"  
      @keydown.enter="addTask"
      autofocus
      />  <!-- 双向绑定清除首尾空格以及回车事件 -->
  </header>
</template>

<script>
export default {
  data(){
    return {
    task:''  /* 添加task */
    }
  },
 props: {
    list: {
      /* 在子组件里面通过 props 接收 */
      type: Array,
      required:true,
    }
  },
  methods:{
    addTask() {
      /* 添加事件回车 */
    this.$emit('addTask', this.task)
      this.task = '' /* 清空 */
  }
  },
  computed: {
 isAll: {
  /* 反选 */
  get(){
    return this.list.every(item =>item.isDone)
  },
  set(val) {
    /* 修改数据执行 */
    this.$emit('checkAll', val)
  }
 }
  },
}
</script>

